<template>
  <div class="hotellist">
    <van-sticky>
      <div class="hotelist_top">
        <van-nav-bar
          class="nav-title"
          title="酒店列表"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <!-- 排序 -->
      <div class="hotelist_nav">
        <van-dropdown-menu active-color="#f5b400">
          <van-dropdown-item v-model="left_list_val" :options="left_list" />
          <van-dropdown-item
            v-model="right_list_val"
            :options="right_list"
            @change="change_tab_right()"
          />
        </van-dropdown-menu>
      </div>
    </van-sticky>

    <!-- 酒店列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      > -->
      <div
        class="card"
        v-for="(i, v) in dataList"
        :key="v.id"
        @click="goHotel(i.id)"
      >
        <div class="card_left">
          <img :src="i.hotel_img" style="width: 100%; object-fit: cover" />
        </div>
        <div class="card_right">
          <div>
            {{ i.hotel_title }}
          </div>
          <div class="card_top">评分：{{ i.hotel_rate }}</div>
          <div class="card_bottom_left">
            {{ i.hotel_adress }} <span>{{ i.type }}</span>
          </div>
          <div class="card_bottom_right">
            <span>￥</span>
            <span>{{ i.hotel_price }}</span> 起
          </div>
        </div>
      </div>
      <!-- </van-list> -->
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);

export default {
  data() {
    return {
      city: this.$route.query.city,
      kw: this.$route.query.kw,
      data: [],
      left_list_val: 0, // 左侧菜单 当前选中项对应的 value
      right_list_val: 0, // 右侧菜单 当前选中项对应的 value
      left_list: [
        { text: "全部酒店", value: 0 },
        { text: "新款酒店", value: 1 },
      ],
      right_list: [
        // 右侧菜单 选项数组
        { text: "默认排序", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
      refreshing: false,
      page: 1,
      dataList: [],
    };
  },

  mounted() {
    window.scrollTo(0, 0);
    if (this.right_list_val == 0) {
      this.getData();
      // 监听 scroll 事件，绑定回调函数
      window.addEventListener("scroll", this.load);
    }
  },

  methods: {
    goHotel(id) {
      this.$router.push(`/hotel?id=${id}`);
    },
    //价格排序
    change_tab_right() {
      this.page = 1;
      this.dataList = [];
      window.scrollTo(0, 0);
      window.removeEventListener("scroll", this.load);
      if (this.right_list_val == 1) {
        this.getDataAsc();
      } else if (this.right_list_val == 2) {
        this.getDataDesc();
      } else {
        this.getData();
        window.addEventListener("scroll", this.load);
      }
    },
    //返回首頁
    onClickLeft() {
      this.$router.push("/");
    },
    // 加载
    load() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        this.getData();
      }
    },
    onRefresh() {
      this.right_list_val = 0;
      this.dataList = [];
      this.page = 1;
      this.getData();
      window.addEventListener("scroll", this.load);
      this.refreshing = false;
    },
    //按搜索
    getData() {
      let url = `/hotel/hotel_more?city=${this.city}&kw=${this.kw}&page=${this.page}`;
      this.axios.get(url).then((res) => {
        // console.log("hello", res.data.results.length, this.page);
        if (res.data.results.length > 0 || this.page > 1) {
          this.data = res.data.results;
          this.page = this.page + 1;
          if (this.data.length <= 0) {
            window.removeEventListener("scroll", this.load);
          } else {
            this.data.forEach((item) => {
              this.dataList.push(item);
            });
          }
        } else {
          Toast({
            message: "该酒店名称不存在，请重新输入",
            overlay: true,
            forbidClick: true,
            duration: 1000,
          });
          this.onClickLeft();
        }
      });
    },
    // 升序
    getDataAsc() {
      let url = `/hotel/hotel_ascending?city=${this.city}&kw=${this.kw}`;
      this.axios.get(url).then((res) => {
        // console.log('升序', res);
        this.dataList = res.data.results;
      });
    },
    // 降序
    getDataDesc() {
      let url = `/hotel/hotel_descending?city=${this.city}&kw=${this.kw}`;
      this.axios.get(url).then((res) => {
        // console.log('降序',res)
        this.dataList = res.data.results;
      });
    },
  },
};
</script>

<style scoped>
a {
  color: black;
}
.card {
  margin: auto;
  width: 90vw;
  font-size: 0.875rem;
  height: 7.5rem;
  border-radius: 10px;
  margin-top: 0.9375rem;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
  display: flex;
  padding: 10px;
}
.card_left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw;
  height: 100%;
  margin-right: 14px;
}

.card_left img {
  height: 7.5rem;
  border-radius: 0.625rem;
}

.card_right {
  width: 56vw;
  height: 120px;
  position: relative;
  /* background-color: pink; */
}

.card_right div:first-child {
  font-size: 17px;
  font-weight: 600;
  margin-top: 8px;
  height: 45px;
}

.card_top {
  width: 80px;
  height: 20px;
  line-height: 20px;
  border-radius: 15px;
  background-color: #f5b400;
  color: #fff;
  text-align: center;
  font-size: 12px;
  margin: 10px 0;
}

.card_bottom_left {
  position: absolute;
  bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #999;
}

.card_bottom_left span {
  border: 1px solid #f5b400;
  padding: 3px 6px;
  width: 60px;
  color: #f5b400;
  border-radius: 5px;
  text-align: center;
}

.card_bottom_right {
  position: absolute;
  right: 3px;
  bottom: 4px;
  font-size: 16px;
}

.card_bottom_right span:nth-of-type(2) {
  font-size: 26px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.van-nav-bar {
  background-color: #f5b400;
}

::v-deep .van-icon-arrow-left:before {
  color: #fff;
}
::v-deep .van-nav-bar__text {
  color: #fff;
}
::v-deep .van-nav-bar__title {
  color: #fff;
}
</style>
